<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="/templates/references.xhtml">
            <ui:define name="reference">
                <p:growl/>
                <h:form id="cts">
                    <p:panel header="#{msgs.cities}">
                        <p:toolbar>  
                            <p:toolbarGroup align="left">  
                                <p:commandButton value="#{msgs.add}" icon="ui-icon-plus" update="cityT" onclick="dlg.show()"/> 
                            </p:toolbarGroup>  
                        </p:toolbar> 
                        <p:dataTable id="cityT" var="city" value="#{citiesBean.findCities()}"
                                     paginator="true" rows="10"
                                     paginatorTemplate="
                                     {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                     rowsPerPageTemplate="5,10,15"> 
                            <p:column filterBy="#{city.name}">
                                <f:facet name="header">
                                    #{msgs.city}
                                </f:facet>
                                #{city.name}
                            </p:column>
                            <p:column filterBy="#{city.region.name}">
                                <f:facet name="header">
                                    #{msgs.region}
                                </f:facet>
                                #{city.region.name}
                            </p:column>
                            <p:column filterBy="#{countries.findCountry(city.region.country.id).name}">
                                <f:facet name="header">
                                    #{msgs.country}
                                </f:facet>
                                #{countries.findCountry(city.region.country.id).name}
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    #{msgs.options}
                                </f:facet>
                                <p:commandButton icon="ui-icon-trash" action="#{citiesBean.delCity(city)}" update=":cts"/>
                            </p:column>
                        </p:dataTable>
                    </p:panel>
                </h:form>
                <p:dialog id="addDialog" widgetVar="dlg" resizable="false" header="#{msgs.add}">
                    <h:form id="frmAdd">
                        <h:panelGrid columns="2">
                            <h:outputLabel for="ctr" value="#{msgs.country}:"/>
                            <p:selectOneMenu id="ctr" value="#{citiesBean.countryId}">
                                <f:selectItems value="#{countries.findCountries()}" var="country" itemValue="#{country.id}" itemLabel="#{country.name}"/>
                                <p:ajax update="rg" immediate="true"/>
                            </p:selectOneMenu>
                            <h:outputLabel for="rg" value="#{msgs.region}:"/>
                            <p:selectOneMenu id="rg" value="#{citiesBean.regionId}" >
                                <f:selectItems value="#{regionsBean.findByCountry(citiesBean.countryId)}" var="region" itemValue="#{region.id}" itemLabel="#{region.name}"/>
                            </p:selectOneMenu>
                            <h:outputLabel for="ct" value="#{msgs.city}:"/>
                            <p:inputText id="ct" value="#{citiesBean.cities.name}"/>
                        </h:panelGrid>
                        <p:commandButton value="#{msgs.add}" update=":cityT" oncomplete="dlg.hide()" action="#{citiesBean.addCity()}" ajax="false"/>
                    </h:form>    
                </p:dialog>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

